<template>
    <div>
        <div @click="swipeteImage(0)" class="sharebtn">
            <h4>客服</h4>
        </div>
        <van-popup class="popprice" v-model="showBJ">
            <div class="logo">
                <h4>客服1号</h4>
                <img src="/assets/kf1.jpg" alt="">
            </div>
        </van-popup>
    </div>
</template>
<script>
import {ImagePreview} from 'vant'
    export default {
        data() {
            return {
                showBJ: false
            }
        },
        methods: {
            swipeteImage(index) {
                var img1 = require('../assets/kf1.jpg');
                var img2 = require('../assets/kf2.jpg');
                var img3 = require('../assets/kf3.jpg');
                ImagePreview({
                    images: [img1, img2, img3],
                    startPosition: index,
                    showIndex: true,
                    onClose() {
                        // do something
                    }
                });
            },
        },
    }
</script>


<style scoped lang='less'>
    .popprice {
        width: 80%;
        padding: 1em;
        .inline {
            position: relative;
            top: 5px;
        }
        .btns {
            text-align: right;
            padding: 10px;
        }
        .ml1em {
            margin-left: 1em;
        }
        .btnPrice {
            margin-top: 1em;
        }
        .inline {
            text-align: left;
            .van-radio {
                display: inline-block;
            }
        }
        .logo {
            text-align: center;
            img {
                height: 100px;
                width: 100px;
                border: 1px solid #ccc;
            }
        }
        h4 {
            line-height: 2em;
        }
        .pub {
            width: 50%;
            display: block;
            margin: 1em auto;
            background: #2cb98e;
            border: 1px solid #2cb98e;
        }
    }
    .sharebtn {
        position: fixed;
        bottom: 70px;
        right: 20px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        background: rgba(45, 186, 186, 0.6);
        border-radius: 50%;
        text-align: center;
        color: #fff;
        i {
            font-size: 18px;
        }
        h4 {
            font-size: 12px;
        }
    }
    .mask {
        position: fixed;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.3);
        .info {
            height: 6em;
            font-size: 14px;
            text-align: center;
            padding: 20px;
            border: 1px dotted;
        }
    }
</style>